<script setup>
	import {
		ref
	} from 'vue';
	import MyTable from './components/MyTable.vue';
	//1.定义数据
	const goodList = ref([{
			id: 1,
			goods_name: '夏季',
			goods_price: 50,
			tags: ['舒适', '透气'],
			inputVisible: false,
			inputValue: ''
		},
		{
			id: 2,
			goods_name: '夏季',
			goods_price: 50,
			tags: ['舒适', '透气'],
			inputVisible: false,
			inputValue: ''
		},
		{
			id: 3,
			goods_name: '夏季2',
			goods_price: 50,
			tags: ['舒适', '透气'],
			inputVisible: false,
			inputValue: ''
		},
		{
			id: 4,
			goods_name: '夏季3',
			goods_price: 50,
			tags: ['舒适', '透气'],
			inputVisible: false,
			inputValue: ''
		},
		{
			id: 5,
			goods_name: '夏季4',
			goods_price: 50,
			tags: ['舒适', '透气'],
			inputVisible: false,
			inputValue: ''
		},
	])
</script>

<template>
	<MyTable :goodList='goodList'>
		<template #header>
			<tr>
				<th scope="col">序号</th>
				<th scope="col">商品名称</th>
				<th scope="col">价格</th>
				<th scope="col">标签</th>
				<th scope="col">操作</th>
			</tr>
		</template>
		<template #body='{row,index}'>
			<td>{{ index + 1 }}</td>
			<td>{{ row.goods_name }}</td>
			<td>￥{{ row.goods_price }}</td>
			<td>{{ row.tags }}</td>
			<td>
				<button type="button" class="btn btn-outline-danger btn-sm">删除
				</button>
			</td>
		</template>
	</MyTable>
</template>

<style scoped>

</style>